<template>

	<el-tabs class="aassdd" v-model="activeName" style="margin-left: 10px;height: 100%">
		<el-tab-pane label="部门权限" name="first" style="height: 100%">
			<el-container style="height: 100%">
				<el-aside>
					<div class="treeleft">
						<el-tree highlight-current check-on-click-node @node-click="deptclick" node-key="id" :filter-node-method="filterNode" :expand-on-click-node="false" :data="orgdata" ref="deptTree" :props="defaultProps" default-expand-all />
					</div>
				</el-aside>
				<el-main style="padding: 0;background:  #ffffff;height: 100%">
					<el-tree @check="deptAuthCheckClick" node-key="id" show-checkbox :data="deptAuthlist.authoritys" :default-checked-keys="deptDefaultList" ref="deptAuthTree" :props="defaultProps2" default-expand-all />
				</el-main>
			</el-container>
		</el-tab-pane>
		<el-tab-pane label="部门人员权限" name="two" style="height: 100%;" v-if="false" >
			<el-container style="height: 100%">
				<el-aside>
					<div class="treeleft">
						<el-tree :filter-node-method="filterNode" :expand-on-click-node="false" :data="orgdata" ref="tree4" :props="defaultProps" default-expand-all />
					</div>
				</el-aside>
				<el-main style="padding: 0;background:  #ffffff;height: 100%">
					<!--					<el-button style="margin-left: 5px;margin-top: 5px" type="primary" size="small">保存权限</el-button>-->
					<el-tree show-checkbox :data="authData2" ref="tree3" :props="defaultProps2" default-expand-all />
				</el-main>
			</el-container>
		</el-tab-pane>
		<el-tab-pane label="角色权限" name="fourth" style="height: 100%">
			<el-container style="height: 100%">
				<el-aside>
					<div class="treeleft">
						<el-tree highlight-current check-on-click-node @node-click="roleClick" node-key="id" :filter-node-method="filterNode" :expand-on-click-node="false" :data="roleData" ref="roleTree" :props="defaultProps" default-expand-all />
					</div>
				</el-aside>
				<el-main style="padding: 0;background:  #ffffff;">
<!--					<el-button style="margin-left: 5px;margin-top: 5px" type="primary" size="small">保存权限</el-button>-->
					<el-tree @check="roleAuthCheckClick" show-checkbox node-key="id" :data="roleAuthlist.authoritys" ref="roleAuthTree" :default-checked-keys="roleDefaultList" :props="defaultProps2" default-expand-all />
				</el-main>
			</el-container>
		</el-tab-pane>
	</el-tabs>


</template>

<script >

export default {
	data() {
		return {
			activeName: 'fourth',
			defaultProps:{
				children: 'subordinates',
				label: 'name',
				disabled: 'disabled',
			},
			defaultProps2:{
				children: 'child',
				label: 'describe',
				disabled: 'disabled',
			},
			list: {
				apiObj: this.$API.dept.userList,
				params: {},
			},
			filterText:'',
			defaultlist:[],
			roleData:[],
			authData:[],
			authData2:[],
			orgdata:[],
			deptAuthlist:{},
			roleAuthlist:{},
			deptDefaultList:[],
			roleDefaultList:[],
		}
	},
	methods: {
		async roleAuthCheckClick(val,val2){
			console.log(val)
			console.log(val2)
			let urls = []
			val2.checkedNodes.forEach(item => {
				urls.push(item.name)
			})
			let deptId = this.$refs.roleTree.getCurrentKey()
			console.log(val2.checkedKeys,urls,deptId)
			//先判断有没有id没有的话走新增
			debugger
			if(this.roleAuthlist.id){
				//有值走更新
				let resk = await this.$API.dept.updateAuthRole.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"roleId": deptId,
					"id":this.roleAuthlist.id
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}else{
				//走新增
				let resk = await this.$API.dept.addAuthRole.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"roleId": deptId,
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}
			this.roleClick({
				"id":deptId
			})
		},
		async deptAuthCheckClick(val,val2){
			console.log(val)
			console.log(val2)
			let urls = []
			val2.checkedNodes.forEach(item => {
				urls.push(item.name)
			})
			let deptId = this.$refs.deptTree.getCurrentKey()
			console.log(val2.checkedKeys,urls,deptId)
			//先判断有没有id没有的话走新增
			debugger
			if(this.deptAuthlist.id){
				//有值走更新
				let resk = await this.$API.dept.updateAuthDept.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"departmentId": deptId,
					"id":this.deptAuthlist.id
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}else{
				//走新增
				let resk = await this.$API.dept.addAuthDept.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"departmentId": deptId,
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}
			this.deptclick({
				"id":deptId
			})
		},
		async roleClick(val){
			this.roleDefaultList = []
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let data = await this.$API.dept.getAuthRole.get({
				roleId:val.id
			})
			if(data.data){
				this.roleAuthlist = data.data
				//递归遍历所有选中的节点然后拿到id赋值
				this.queryId(this.roleAuthlist.authoritys,this.roleDefaultList)
				console.log(data)
				loading.close()
			}else{
				this.$message.error(data.message);
				if(!this.roleAuthlist || !this.roleAuthlist.authoritys){
					let res2 = await this.$API.dept.authorityList.get();
					this.roleAuthlist.authoritys = res2.data
				}
				loading.close()
			}
		},
		async deptclick(val){
			this.deptDefaultList = []
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let data = await this.$API.dept.getAuthDept.get({
				departmentId:val.id
			})
			if(data.data){
				this.deptAuthlist = data.data
				//递归遍历所有选中的节点然后拿到id赋值
				this.queryId(this.deptAuthlist.authoritys,this.deptDefaultList)
				console.log(data)
				loading.close()
			}else{
				this.$message.error(data.message);
				if(!this.deptAuthlist || !this.deptAuthlist.authoritys){
					let res2 = await this.$API.dept.authorityList.get();
					this.deptAuthlist.authoritys = res2.data
				}
				loading.close()
			}

		},
		queryId(list,ar){
			list.forEach(item => {
				if(item.selected !== 0){
					ar.push(item.id)
				}
				if(item.child && item.child.length > 0){
					this.queryId(item.child,ar)
				}
			})
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	},
	watch:{
		filterText(val) {
			console.log(this.$refs.tree)
			this.$refs.tree.filter(val);
		}
	},
	async created() {
		let res = await this.$API.dept.roleList.get();
		this.roleData = res.data;
		let res2 = await this.$API.dept.authorityList.get();
		this.authData = res2.data;
		let res3 = await this.$API.dept.authorityList.get();
		this.authData2 = res3.data;
		let res4 = await this.$API.dept.list.get();
		this.orgdata = res4.data;
		console.log(this.orgdata)
	}
}


</script>
<style>
.treeleft{
	background: #ffffff;
	padding: 0px;
	height: 100%;
	width: auto;

}
.aassdd .el-tabs__content{
	height: calc(100% - 60px);
}
</style>
